<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">站点快速访问</div>
                        <div class="layui-card-body">
                            <div class="layui-carousel layadmin-carousel layadmin-shortcut">
                                <div carousel-item>
                                    <ul class="layui-row layui-col-space10">
                                        <li class="layui-col-xs2">
                                            <a href="/core/sentence.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-template-1"></i>
                                                <cite>分词</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/core/sentence.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-template"></i>
                                                <cite>句法</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/core/discourse.jsp" target="_blank">
                                                <i class="layui-icon  layui-icon-more"></i>
                                                <cite>词云</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/core/discourse.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-console"></i>
                                                <cite>词频</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/core/discourse.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-senior"></i>
                                                <cite>实体</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/core/discourse.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-note"></i>
                                                <cite>主题</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/core/discourse.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-praise"></i>
                                                <cite>情感</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/core/discourse.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-unlink"></i>
                                                <cite>关键词</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/core/discourse.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-app"></i>
                                                <cite>贝叶斯分类器</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/core/discourse.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-location"></i>
                                                <cite>地域可视化</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/core/discourse.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-close-fill"></i>
                                                <cite>敏感词</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/core/discourse.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-survey"></i>
                                                <cite>自动摘要</cite>
                                            </a>
                                        </li>
                                    </ul>
                                    <ul class="layui-row layui-col-space10">
                                        <li class="layui-col-xs2">
                                            <a lay-href="set/base/website">
                                                <i class="layui-icon layui-icon-tree"></i>
                                                <cite>文本相似度</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/core/weibo.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-login-weibo"></i>
                                                <cite>微博分析</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/docs/index.jsp" target="_blank">
                                                <i class="layui-icon layui-icon-home"></i>
                                                <cite>文档首页</cite>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="/backend/start/index.html" target="_blank">
                                                <i class="layui-icon layui-icon-set"></i>
                                                <cite>后台</cite>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览</div>
                        <div class="layui-card-body">
                            <div class="layui-tab">
                                <ul class="layui-tab-title">
                                    <li class="layui-this">流量监控</li>
                                    <li>流量分布</li>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <div id="line" style="width: 900px;height:300px;"></div>
                                    </div>
                                    <div class="layui-tab-item">
                                        <div id="pie" style="width: 900px;height:300px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">系统统计</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" lay-indicator="inside"
                         lay-arrow="none" style="width: 100%; height: 280px;">
                        <div carousel-item="">
                            <ul class="layui-row layui-col-space10 layui-this">
                                <script type="text/html" template lay-url="{{#
                                getBasePath();
                                }}/admin/system/data.do">
                                    <li class="layui-col-xs6">
                                        <a lay-href="" class="layadmin-backlog-body">
                                            <h3>管理员数量</h3>
                                            <p><cite>{{d.data.admin}}</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a lay-href="" class="layadmin-backlog-body">
                                            <h3>字典数量</h3>
                                            <p><cite>{{d.data.dic}}</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a lay-href="" class="layadmin-backlog-body">
                                            <h3>模型数量</h3>
                                            <p><cite>{{d.data.model}}</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs6">
                                        <a lay-href="" class="layadmin-backlog-body">
                                            <h3>建议数量</h3>
                                            <p><cite>{{d.data.suggestion}}</cite></p>
                                        </a>
                                    </li>
                                </script>
                            </ul>
                        </div>

                        <div class="layui-carousel-ind">
                            <ul>
                                <li class="layui-this"></li>
                            </ul>
                        </div>
                        <button class="layui-icon layui-carousel-arrow" lay-type="sub"></button>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">网络数据</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" lay-indicator="inside"
                         lay-arrow="none" style="width: 100%; height: 280px;">
                        <div carousel-item="">
                            <ul class="layui-row layui-col-space10 layui-this">
                                <li class="layui-col-xs6">
                                    <a lay-href="" class="layadmin-backlog-body">
                                        <h3>发送字节</h3>
                                        <p><cite id="upload"></cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a lay-href="" class="layadmin-backlog-body">
                                        <h3>接收字节</h3>
                                        <p><cite id="download"></cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a lay-href="" class="layadmin-backlog-body">
                                        <h3>错误率</h3>
                                        <p><cite id="error"></cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a lay-href="" class="layadmin-backlog-body">
                                        <h3>丢包数</h3>
                                        <p><cite id="lose"></cite></p>
                                    </a>
                                </li>

                            </ul>
                        </div>

                        <div class="layui-carousel-ind">
                            <ul>
                                <li class="layui-this"></li>
                            </ul>
                        </div>
                        <button class="layui-icon layui-carousel-arrow" lay-type="sub"></button>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">实时监控</div>
                <div class="layui-card-body layadmin-takerates">
                    <div class="layui-progress" lay-showPercent="yes">
                        <h3>CPU使用率</h3>
                        <div id="cpu" class="layui-progress-bar" lay-percent="58%"></div>
                    </div>
                    <div class="layui-progress" lay-showPercent="yes">
                        <h3>内存占用率</h3>
                        <div id="mem" class="layui-progress-bar layui-bg-red" lay-percent="90%"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<script>
    layui.use('console', layui.factory('console'));
    var element;
    layui.use('element', function () {
        element = layui.element;

    });

    jQuery.ajax({
        url: "/admin/interface/data.do",
        type: "get",
        dataType: "json",
        contentType: "application/json;charset=utf-8"
    }).done(function (data) {

        console.log(data);
        loadLine(data);

    }).fail(function (data) {
        layer.alert("请求失败", {icon: 7});
        layer.close(layerIndex);
    });

    /**
     * 载入折线图
     * @param data
     */
    var LineChart;

    function loadLine(data) {

        //赋值给chart
        var thisChart = LineChart;
        //处理数据
        //处理数据
        var res = data.data;
        var name = [];
        var segArr = [];
        var senArr = [];
        var disArr = [];
        var weiboArr = [];
        for (var i = 0; i < res.length; i++) {
            name.push(res[i].time);
            for (var j = 0; j < 4; j++) {

                if (res[i].count[j].name == '词法分析接口') {
                    var obj = new Object();
                    obj.name = "词法分析接口";
                    obj.value = res[i].count[j].count;
                    segArr.push(obj);
                }
                if (res[i].count[j].name == '句法分析接口') {
                    var obj = new Object();
                    obj.name = "句法分析接口";
                    obj.value = res[i].count[j].count;
                    senArr.push(obj);

                }
                if (res[i].count[j].name == '语篇分析接口') {
                    var obj = new Object();
                    obj.name = "语篇分析接口";
                    obj.value = res[i].count[j].count;
                    disArr.push(obj);

                }
                if (res[i].count[j].name == '微博分析接口') {
                    var obj = new Object();
                    obj.name = "微博分析接口";
                    obj.value = res[i].count[j].count;
                    weiboArr.push(obj);

                }
            }
        }
        // 基于准备好的dom，初始化ECharts实例
        if (thisChart != null && thisChart != "" && thisChart != undefined) {
            thisChart.dispose();
        }
        thisChart = echarts.init(document.getElementById('line'), 'macarons');
        thisChart.showLoading();

        var option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['句法分析接口', '词法分析接口', '语篇分析接口', '微博分析接口']
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: name
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: "词法分析接口",
                    data: segArr,
                    type: 'line',
                    areaStyle: {}
                },
                {
                    name: "句法分析接口",
                    data: senArr,
                    type: 'line',
                    areaStyle: {}
                },
                {
                    name: "语篇分析接口",
                    data: disArr,
                    type: 'line',
                    areaStyle: {}
                },
                {
                    name: "微博分析接口",
                    data: weiboArr,
                    type: 'line',
                    areaStyle: {}
                }
            ]
        };

        thisChart.hideLoading();
        thisChart.setOption(option, true);

    }


    /**
     * 饼图的ajax
     */

    jQuery.ajax({
        url: "/admin/interface/totalData.do",
        type: "get",
        dataType: "json",
        contentType: "application/json;charset=utf-8"
    }).done(function (data) {

        console.log(data);
        loadPie(data);

    }).fail(function (data) {
        layer.alert("请求失败", {icon: 7});
        layer.close(layerIndex);
    });

    /**
     * 载入折线图
     * @param data
     */
    var pieChart;

    function loadPie(data) {

        //赋值给chart
        var thisChart = pieChart;
        //处理数据
        var res = data.data;
        var name = [];
        var segArr = [];
        var senArr = [];
        var disArr = [];
        var weiboArr = [];
        var list = [];
        for (var i = 0; i < res.length; i++) {
            name.push(res[i].time);
            for (var j = 0; j < 4; j++) {

                if (res[i].count[j].name == '词法分析接口') {
                    var obj = new Object();
                    obj.name = "词法分析接口";
                    obj.value = res[i].count[j].count;
                    list.push(obj);
                }
                if (res[i].count[j].name == '句法分析接口') {
                    var obj = new Object();
                    obj.name = "句法分析接口";
                    obj.value = res[i].count[j].count;
                    list.push(obj);

                }
                if (res[i].count[j].name == '语篇分析接口') {
                    var obj = new Object();
                    obj.name = "语篇分析接口";
                    obj.value = res[i].count[j].count;
                    list.push(obj);

                }
                if (res[i].count[j].name == '微博分析接口') {
                    var obj = new Object();
                    obj.name = "微博分析接口";
                    obj.value = res[i].count[j].count;
                    list.push(obj);

                }
            }
        }

        // 基于准备好的dom，初始化ECharts实例
        if (thisChart != null && thisChart != "" && thisChart != undefined) {
            thisChart.dispose();
        }
        thisChart = echarts.init(document.getElementById('pie'), 'macarons');
        thisChart.showLoading();

        var option = {
            title: {
                text: 'API 流量分布图',
                subtext: '调用占比',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: ['句法分析接口', '词法分析接口', '语篇分析接口', '微博分析接口'],

                selected: data.selected
            },
            series: [
                {
                    name: 'API 流量分布',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: list,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        thisChart.hideLoading();
        thisChart.setOption(option, true);

    }


    /**
     *
     * 加载系统信息的
     *
     */
    window.setInterval(updateSystemInfo, 10000);

    function updateSystemInfo() {

        jQuery.ajax({
            url: "/admin/system/info.do",
            type: "get",
            dataType: "json",
            contentType: "application/json;charset=utf-8"
        }).done(function (data) {

            console.log(data);
            var up = data.net.upload;
            var down = data.net.download;
            var cpu = data.cpu.combined;
            var mem = data.memory.use *100 + "";
            mem = mem.substring(0, mem.indexOf(".") + 2) + "%";
            var error = data.net.error;
            var lose = data.net.lose;
            $('#cpu').attr("lay-percent", cpu);
            $('#mem').attr("lay-percent", mem);
            $('#upload').empty();
            $('#upload').append(up);
            $('#download').empty();
            $('#download').append(down);
            $('#error').empty();
            $('#error').append(error);
            $('#lose').empty();
            $('#lose').append(lose);
            element.render();

        }).fail(function (data) {
            layer.alert("请求失败", {icon: 7});
            layer.close(layerIndex);
        });
    }


</script>


<!--<%&#45;&#45;两个图表的加载&#45;&#45;%>-->
<script src="/static/layui/js/charts/Echarts/map/js/staticMap.js"></script>
<script src="/static/layui/js/charts/Echarts/echarts.min.js"></script>
<script src="/static/layui/js/charts/Echarts/echarts-gl.js"></script>
<script src="/static/layui/js/charts/Echarts/map/js/china.js"></script>
<!-- 引入echart的主题 -->
<script src="/static/layui/js/charts/Echarts/theme/macarons.js"></script>
<script src="/static/layui/js/charts/Echarts/theme/roma.js"></script>
<script src="/static/layui/js/charts/Echarts/theme/shine.js"></script>
<script src="/static/layui/js/charts/Echarts/theme/infographic.js"></script>

